<template>
  <div class="details-container app-container" v-loading="listLoading">
    <div class="detail-title">
      <div>
        行业规则：{{ industryName
        }}<span style="padding-left: 15px">行业编号：{{ industryId }}</span>
      </div>
    </div>

    <div class="detail-title">
      <div>
        <!--  -->
        <el-button :disabled="!industryId" v-waves class="filter-item" type="primary" icon="el-icon-circle-plus"
          @click="onAddOrEdit()">
          新增规则
        </el-button>
      </div>
    </div>
    <div class="page-content">
      <el-table :key="0" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id_public_middle_table }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行业名称" align="center">
          <template slot-scope="{ row }">
            {{ row.mid_table_remark_009 }}
          </template>
        </el-table-column>
        <el-table-column label="行业规则" align="center">
          <template slot-scope="{ row }">
            <el-popover placement="left" width="400" trigger="click">
              <div class="popover-box nowrap">
                <pre class="cont-item" v-html="row.show_mid_table_remark_021"></pre>
              </div>
              <code class="table-cell-overflow" slot="reference">{{ row.show_mid_table_remark_021 }}</code>
            </el-popover>

          </template>
        </el-table-column>

        <el-table-column label="更新时间" align="center" width="160" :resizable="false">
          <template slot-scope="{ row }">
            {{ row.time_update }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" width="190" class-name="small-padding fixed-width" :resizable="false">
          <template slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" content="上移" placement="top">
              <a class="circle-btn" @click="handleMovePosition(row, null, null)"><i class="el-icon-top"></i></a>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="下移" placement="top">
              <a class="circle-btn" @click="handleMovePosition(row, null, 'down')"><i class="el-icon-bottom"></i></a>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="置顶" placement="top">
              <a class="circle-btn"><i class="el-icon-upload2"></i></a>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="置底" placement="top">
              <a class="circle-btn"><i class="el-icon-download"></i></a>
            </el-tooltip></template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" :resizable="false">
          <template slot-scope="{ row }">
            <span class="table-btn" type="text" size="mini" @click="onAddOrEdit(row)">
              编辑
            </span>
            <span class="table-btn col-danger" type="text" size="mini" @click="handleDelete(row)">
              删除
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
      @pagination="getPageList" />
    <comp-new-modify ref="refNewModify" @refresh="onRefresh"></comp-new-modify>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import Pagination from "@/components/Pagination";

import waves from "@/directive/waves"; // waves directive
import CompNewModify from "./components/new_modify_rule.vue";
import { middleList } from "@/api/middle";

export default {
  name: "IndustryRule",
  directives: { waves },
  components: {
    Pagination,
    CompNewModify,
  },
  data() {
    return {
      industryId: "",
      industryName: "",

      listQuery: {
        // type_middle_app: 213001,
        // type_inner_app: 1001,
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name:
          "public_middle_table_lite_mod_ai_chatgpt",
        type_middle_app: 20001,
        type_inner_app: 1001,
        is_online: 0,
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
      },
      listLoading: false,
      list: [],
      total: 1,
      currentPage: 1,
      list: [],
      couponTitle: "",
      isRequesting: false,
    };
  },
  filters: {
  },
  async mounted() {
    let id = this.$route.query.id;
    let name = decodeURIComponent(this.$route.query.name);
    this.industryId = id;
    this.industryName = name;

    if (id) {
      this.getList();
    } else {
      this.list = [];
    }
  },
  methods: {
    /*
     * 获取页面数据
     * */
    getList() {
      this.listLoading = true;
      let tmp_listQuery = Object.assign(
        { mid_table_remark_008: this.industryId },
        this.listQuery
      );
      middleList(this.Qs.stringify(tmp_listQuery)).then((response) => {
        let result = response.page_content || [];
        for (let i = 0; i < result.length; i++) {
          let item = result[i];
          item.show_mid_table_remark_021 = item.mid_table_remark_021;
          try {
            if (item.show_mid_table_remark_021) {
              item.show_mid_table_remark_021 = Base64.decode(item.show_mid_table_remark_021)
            }
          } catch (error) {
          }
        }
        this.list = result;
        this.total = response.result_num;
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    /*
     * 点击分页进行查询
     * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx =
        (val.page - 1) * this.listQuery.pre_db_para_length_4_list;
      this.getList();
    },

    onAddOrEdit(row) {
      let data = row;
      if (!row) {
        data = {
          mid_table_remark_008: this.industryId,
          mid_table_remark_009: this.industryName,
          mid_table_remark_021: "",
        };
      }
      this.$refs.refNewModify.onEditOrAdd(data);
    },
    onRefresh() {
      this.getList();
    },
    handleDelete(row) {
      this.$confirm("您确定要删除该规则吗?删除之后将无法找回", "提示", {
        type: "warning",
      })
        .then(() => {
          let postData = {
            invoke_method: "public_insert_or_update_middle_table",
            pre_db_para_middle_table_name:
              "public_middle_table_lite_mod_ai_chatgpt",
            type_middle_app: 20001,
            type_inner_app: 1001,
            is_online: 111,
            pre_db_para_id_public_middle_table: row.id_public_middle_table,
          };
          middleList(this.Qs.stringify(postData)).then(
            (res) => {
              this.$notify({
                title: "Success",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
              if (
                this.total - 1 ==
                (this.currentPage - 1) *
                this.listQuery.pre_db_para_length_4_list
              ) {
                if (this.currentPage - 2 > 0 || this.currentPage - 2 == 0) {
                  this.listQuery.pre_db_para_begin_idx =
                    (this.currentPage - 2) *
                    this.listQuery.pre_db_para_length_4_list;
                }
              }
              this.getList();
            },
            (error) => { }
          );
        })
        .catch(() => { });
    },
    handleMovePosition(row, method = 'public_page_4m_move_table', direction = 'up') {
      let postData = {
        invoke_method: method,
        pre_cmd_para_move_direction_type: direction,
        id_public_middle_table: row.id_public_middle_table,
        pre_db_para_middle_table_name: "public_middle_table_lite_mod_ai_chatgpt",
      }
      middleList(this.Qs.stringify(postData)).then((res) => {
        this.$notify({
          title: "Success",
          message: "操作成功",
          type: "success",
          duration: 2000,
        });
      }, err => {

      })
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/variables";
@import "../../styles/common.scss";

.detail-title {
  border-bottom: 1px solid #e3e3e3;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-content {
  padding: 24px 24px 0;

  .el-row {
    margin-bottom: 10px;
  }
}

.circle-btn {
  display: inline-block;
  width: 30px;
  height: 30px;

  line-height: 30px;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  color: rgba(78, 84, 91, 1);
  border: 1px solid rgba(78, 84, 91, 1);
  margin-right: 10px;
  text-align: center;

  &:hover {
    border-color: #29AE6D;
    color: #29AE6D;
  }
}
</style>
